<!-- 兄弟传值、跨代传值、任意传值 -->
<!-- 主要涉及总线机制(发布订阅/Bus/总线/观察者)的使用 -->
<!-- 现在有两个 child 组件。要实现一个功能：点击一个组件另一个组件会变成它显示的内容。
这就涉及到了非父子组件的传值，即兄弟关系 -->
<!-- $emit 和 $on 分别代表触发事件和监听事件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child content="edison"></child>
    <child content="lee"></child>
  </div>

  <script>
    Vue.prototype.bus=new Vue()

    Vue.component('child',{
      props:{
        content:String
      },
      template:"<div @click='handleClick'>{{selfContent}}</div>",
      data(){
        return {
          selfContent:this.content
        }
      },
      methods:{
        handleClick(){
          this.bus.$emit('change',this.selfContent)
        }
      },
      mounted(){
        let _this=this
        this.bus.$on('change',(msg)=>{
          _this.selfContent=msg
        })
      }
    })

    let app=new Vue({
      el:"#root"
    })
  </script>
</body>
</html>